<template>
  <div class="wrapper">
    <div class="logo">
      <img :src="image" :title="title">
    </div>
    <shopping-cart></shopping-cart>
  </div>
</template>

<script>
// 导入图片
import logo from './assets/logo.png';
// 导入组件
import ShoppingCart from './components/ShoppingCart.vue';

export default {
  name: 'App',
  data(){
    return {
      image: logo,
      title: "测试单文件组件"
    }
  },
  // 注册子组件(局部注册)
  components: { 
    'shopping-cart': ShoppingCart 
  }
}
</script>

<style>
.wrapper {
  margin: 25px auto;
  border: 1px solid blue;
  width: 90vw;
}
.logo {
  text-align: center;
}
</style>
